<template>
  <div class="register w100 flex">
    <div class="register-content h100 flex-ai-jc-center">
      <div class="form-content">
        <h3 style="color: #409eff;">学生管理系统 | 注册</h3>
        <h3 style="color: #409eff;">修改学生管理系统 | 注册</h3>
        <!-- 表单 -->
        <!-- model:必填属性，绑定表单中的各个表单控件的数据 -->
        <!-- prop:必填属性，标记哪个form-item -->
        <el-form :rules="registerFormRules" :model="registerForm" label-position="top" label-width="80px"
          hide-required-asterisk ref="registerFormRef">

          <el-form-item prop="userName">
            <template #label>
              <div class="label-row">
                <span :class="['title', { active: registerFormActive.userName }]">账号</span>
                <span :class="['placeholder', { active: registerFormActive.userName }]"
                  @click="handleRegisterInputPlaceholder('userName')">账号</span>
              </div>
            </template>
            <el-input v-model="registerForm.userName" prefix-icon="el-icon-user" @focus="registerInputFocus('userName')"
              @blur="registerInputBlur('userName')" ref="userNameRef"></el-input>
          </el-form-item>

          <el-form-item label="姓名" prop="realName">
            <template #label>
              <div class="label-row">
                <span :class="['title', { active: registerFormActive.realName }]">姓名</span>
                <span :class="['placeholder', { active: registerFormActive.realName }]"
                  @click="handleRegisterInputPlaceholder('realName')">姓名</span>
              </div>
            </template>
            <el-input v-model="registerForm.realName" prefix-icon="el-icon-user" @focus="registerInputFocus('realName')"
              @blur="registerInputBlur('realName')" ref="realNameRef"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <template #label>
              <div class="label-row">
                <span :class="['title', { active: registerFormActive.password }]">密码</span>
                <span :class="['placeholder', { active: registerFormActive.password }]"
                  @click="handleRegisterInputPlaceholder('password')">密码</span>
              </div>
            </template>
            <el-input v-model="registerForm.password" prefix-icon="el-icon-view" @focus="registerInputFocus('password')"
              @blur="registerInputBlur('password')" ref="passwordRef"></el-input>
          </el-form-item>

          <el-form-item label="确认密码" prop="validPassword">
            <template #label>
              <div class="label-row">
                <span :class="['title', { active: registerFormActive.validPassword }]">确认密码</span>
                <span :class="['placeholder', { active: registerFormActive.validPassword }]"
                  @click="handleRegisterInputPlaceholder('validPassword')">确认密码</span>
              </div>
            </template>
            <el-input v-model="registerForm.validPassword" prefix-icon="el-icon-view"
              @focus="registerInputFocus('validPassword')" @blur="registerInputBlur('validPassword')"
              ref="validPasswordRef"></el-input>
          </el-form-item>

          <el-form-item label="验证码" prop="code">
            <template #label>
              <div class="label-row">
                <span :class="['title', { active: registerFormActive.code }]">验证码</span>
                <span :class="['placeholder', { active: registerFormActive.code }]"
                  @click="handleRegisterInputPlaceholder('code')">验证码</span>
              </div>
            </template>
            <el-row type="flex" justify="space-between">
              <el-input v-model="registerForm.code" prefix-icon="el-icon-s-marketing" style="width: 40%;"
                @focus="registerInputFocus('code')" @blur="registerInputBlur('code')" ref="codeRef"></el-input>
              <div class="code" v-html="captchaImageInfo.captchaImage"></div>
            </el-row>
          </el-form-item>

          <el-form-item>
            <el-row type="flex" justify="space-between">
              <el-button type="primary" @click="handleregister">注册</el-button>
              <div>
                已有账号？
                <el-button type="text">
                  <router-link to="/login" tag="span">立即登录</router-link>
                </el-button>
              </div>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { captchaImage, register } from '@/api/user';
import { setToken } from '@/utils/cookies';

export default {
  name: 'register',
  components: {},
  data() {
    var validPassword = (rule, value, callback) => {
      console.log(rule);//规则
      console.log(value);//当前用户输入的值
      console.log(callback);//回调函数，结果值返回出去
      if (!value) {
        callback(new Error("请输入密码"))
      } else if (this.registerForm.password !== value) {
        callback(new Error("两次密码不一致"))
      } else {
        callback()
      }
    };

    return {
      // 表单
      registerForm: {
        userName: undefined,
        realName: undefined,
        password: undefined,
        validPassword: undefined,
        code: undefined,
      },

      // 校验
      registerFormRules: {
        // 账号
        userName: [
          {
            required: true,//必填属性
            message: "请输入账号(1-30位中文/英文/数字)",//校验提示
            trigger: "blur",//触发事件
            // 正则校验 1-30位中文/英文/数字
            pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]{1,30}$/,
          }
        ],
        // 姓名
        realName: [
          {
            required: true,//必填属性
            message: "请输入姓名(2-5)位中文",//校验提示
            trigger: "blur",//触发事件
            pattern: /^[\u4e00-\u9fa5]{2,5}$/,
          }
        ],
        // 密码
        password: [
          {
            required: true,//必填属性
            message: "请输入密码",//校验提示
            trigger: "blur",//触发事件
          }
        ],
        // 确认密码
        validPassword: [
          {
            required: true,//必填属性
            trigger: "blur",//触发事件
            // validator自定义校验函数
            validator: validPassword,
          }
        ],
        // 验证码
        code: [
          {
            required: true,//必填属性
            message: "请输入验证码",//校验提示
            trigger: "blur",//触发事件
          }
        ],

      },

      // 验证码
      captchaImageInfo: {},


      // 注册动态效果
      registerFormActive: {
        userName: false,
        realName: false,
        password: false,
        validPassword: false,
        code: false,
      }

    }
  },

  created() {
    this.getCaptchaImage()

  },

  methods: {
    // 注册
    handleregister() {
      console.log(this.registerForm);
      this.$refs["registerFormRef"].validate((valid) => {
        console.log("02913012830218");
        
        if (!valid) return

        const { uuid } = this.captchaImageInfo
        register({ ...this.registerForm, uuid })
          .then(res => {
             console.log("000000",res);
            this.$message.success(res.msg)
            // 存储token
            setToken(res.data.token)
            // 跳转到登录页
            this.$router.push("/login")
          })
          .catch(err => {
            this.getCaptchaImage()
          })
      })

    },

    // 获取验证码
    getCaptchaImage() {
      captchaImage().then(res => {
        console.log(res);
        this.captchaImageInfo = res.data
      })
    },


    // 输入框的动态效果
    registerInputFocus(val) {
      this.registerFormActive[val] = true
    },
    registerInputBlur(val) {
      if (this.registerForm[val]) return
      this.registerFormActive[val] = false
    },


    // 点击占位文本
    handleRegisterInputPlaceholder(value) {
      this.$refs[`${value}Ref`].focus()
    },

  }
}
</script>

<style lang="scss" scoped>
.register {
  height: 100vh;
  background-image: url("http://mashang.eicp.vip:5557/student/v3/admin/img/login-bg.d7992b58.jpg");
  background-size: 100% auto;
  justify-content: flex-end;

  // 修改elementUI样式
  ::v-deep .el-input__prefix {
    height: 50%;
  }

  .register-content {
    width: 800px;
    background-color: #fff;
    border-radius: 50% 0 0 50%;

    .form-content {
      width: 300px;

      .code {
        height: 40px;
      }

      .label-row {
        position: relative;
        width: 80px;

        &::before {
          content: "*";
          color: #f56c6c;
          margin-right: 4px;
        }

        span {
          display: inline-block;
          width: 5em;
          font-size: 14px;
          transition: 0.5s;

          &.title {
            color: #909399;
            font-weight: bold;
            opacity: 1;

            &.active {
              opacity: 0;
            }

          }

          &.placeholder {
            position: absolute;
            top: 50px;
            left: 30px;
            z-index: 1;
            color: #c4c5c8;
            cursor: text;

            &.active {
              top: 0;
              left: 10px;
              color: #66b1ff;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}
</style>
